<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
<script type="text/javascript" src="../../libs/js/graphical/raphael.js"></script>
<script type="text/javascript" src="../../libs/js/graphical/svgmap.js"></script>
<script type="text/javascript" src="../../libs/js/graphical/map_data/china.js"></script>

<style type="text/css">
			.demo {
				width: 600px;
				margin: 40px auto 0 auto;
				font-size: 14px;
			}
			#label {
				width: 200px;
				height: 25px;
				line-height: 25px;
				margin: 10px auto
			}
			
			#label span {
				height: 25px;
				width: 25px;
				display: block;
				float: left;
				text-align: center
			}
			




			.svgmap{position: relative;}
			.mapTip{
				display:none; 
				position:absolute; 
				padding:8px; 
				border: 1px solid #c4d0df;
				background: #f7f8fa;
				box-shadow: 0 0 6px 1px rgba(0,0,0,.08);
				border-radius: 5px;
				}

			.mapTip .arrow,
			.mapTip .arrowMask{ 
				position: absolute; 
				width: 0; 
				height: 0; 
				border-color: transparent; 
				border-style: solid;
			}
			.mapTip .arrow{ 
				bottom: -7px; 
				left: 50%; 
				margin-left: -7px; 
				border-width: 7px; 
				border-top-color: #c4d0df; 
				border-bottom-width: 0;
			}
			.mapTip .arrowMask{
				bottom: 1px; 
				border-width: 6px; 
				margin-left: -6px; 
				border-top-color: #f7f8fa; 
				border-bottom-width: 0;
			}
		</style>
	</head>
	<body>
	<div class="page_content">
		<div class="groupTitle"><span>示例说明</span></div>
		地图颜色由数据控制，数目多则颜色深，少则颜色浅
		<div class="demo">
			<div id="label">
					<span>高</span>
					<span style="background-color:#3399ff"></span>
					<span style="background-color:#5daeff"></span>
					<span style="background-color:#79bcff"></span>
					<span style="background-color:#9cceff"></span>
					<span style="background-color:#baddff"></span>
					<span style="background-color:#e4f2ff"></span>
					<span>低</span>
				</div>
			<div id="chinaMap1"></div>
		</div>
	</div>
		

		<script type="text/javascript">
			$(function(){
				var strokeWidth;
				if(broswerFlag=="IE7"||broswerFlag=="IE8"){
					strokeWidth=1;
				}
				else{
					strokeWidth=5;
				}
	  			$('#chinaMap1').SVGMap({
					mapName: 'china',
					mapWidth: 600,
					mapHeight: 500,
					strokeWidth:strokeWidth,
					showName:true,
					showCapital:false,
					showTip:true,
					stateCursor: 'pointer',
		            showNameAttr: {
						'fill': '#0f1c3f',
						'font-family': 'Microsoft yahei',
						'font-size': 20,
						'font-weight': 'normal'
					},
		            stateData: {
						'heilongjiang': {'stateInitColor': 3,'visit':800},
						'beijing': {'stateInitColor': 2,'visit':300},
						'shanghai': {'stateInitColor': 3,'visit':400},
						'tianjin': {'stateInitColor': 4,'visit':900},
						'sichuan': {'stateInitColor': 2,'visit':200},
						'chongqing': {'stateInitColor': 2,'visit':300},
						'shanxi': {'stateInitColor': 2,'visit':200},
						'shandong': {'stateInitColor': 5,'visit':1000},
						'shanxi': {'stateInitColor': 3,'visit':800},
						'zhejiang': {'stateInitColor': 4,'visit':900},
						'jiangshu': {'stateInitColor': 2,'visit':800},
						'hunan': {'stateInitColor': 4,'visit':900},
						'guizou': {'stateInitColor': 5,'visit':1000},
						'neimenggu': {'stateInitColor': 3,'visit':500},
						'henan': {'stateInitColor': 3,'visit':600},
						'gansu': {'stateInitColor': 4,'visit':800},
						'ningxia': {'stateInitColor': 2,'visit':200},
						'qinghai': {'stateInitColor': 5,'visit':1000},
						'xinjiang': {'stateInitColor': 4,'visit':800},
						'jilin': {'stateInitColor': 3,'visit':500},
						'liaoning': {'stateInitColor': 3,'visit':200},
						'xizang': {'stateInitColor': 4,'visit':800},
						'hubei': {'stateInitColor': 4,'visit':800},
						'guizhou': {'stateInitColor': 4,'visit':800},
						'jiangxi': {'stateInitColor': 3,'visit':600},
						'fujian': {'stateInitColor': 3,'visit':600},
						'yunnan': {'stateInitColor': 3,'visit':600},
						'hebei': {'stateInitColor': 1,'visit':100},
						'shaanxi': {'stateInitColor': 0,'visit':50},
						'guangxi': {'stateInitColor': 3,'visit':600},
						'guangdong': {'stateInitColor': 3,'visit':600},
						'hainan': {'stateInitColor': 3,'visit':600},
						'taiwan': {'stateInitColor': 3,'visit':600},
						'jiangsu': {'stateInitColor': 3,'visit':600},
						'anhui': {'stateInitColor': 3,'visit':600},
						'aomen': {'stateInitColor': 5,'visit':900},
						'xianggang': {'stateInitColor': 5,'visit':900}
					},
					stateHoverColor: '#0080ff',
					mapTipHtml: function(stateData, obj){
				        return '地区:' +obj.name+'</br>访问数：'+ (stateData)[obj.id].visit
				    },
					clickCallback: function(stateData, obj){
				        top.Toast("showNoticeToast",'点击了：'+obj.name);
				    }
				});

				
		});


		</script>
	</body>
</html>